<template>
	<el-form :model="form" ref="form" class="form rules">
		<el-row class="payTypes">
			<template v-for="(pay,idx) of form.payTypes">
				<el-col :span="24" :key="pay.type" v-if="pay.type===5">
					<el-checkbox
						class="vertical-t margin-m-right"
						:label="pay.label"
						v-model="pay.checked"
						:value="pay.type"
						@change="val=>handleChange(val,pay)"
					></el-checkbox>
					<el-form-item
						v-if="pay.checked"
						label="支付方式："
						class="inline-block margin-m-right"
						:prop="`payTypes.${idx}.description`"
						:rules="rules.description"
					>
						<el-input
							@input="handleInput"
							class="w180"
							maxlength="12"
							size="mini"
							v-model.trim="pay.description"
							placeholder
						></el-input>
					</el-form-item>
					<el-form-item
						v-if="pay.checked"
						label="支付金额："
						:prop="`payTypes.${idx}.payment`"
						:rules="rules.price"
						class="inline-block"
					>
						<el-input @input="handleInput" class="w160" size="mini" v-model="pay.payment" placeholder>
							<span slot="suffix">元</span>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" :key="pay.type" v-else>
					<el-checkbox
						class="vertical-t margin-m-right"
						:label="pay.label"
						v-model="pay.checked"
						:value="pay.type"
						@change="val=>handleChange(val,pay)"
					></el-checkbox>
					<el-form-item
						v-if="pay.checked"
						label="金额"
						class="inline-block"
						:prop="`payTypes.${idx}.payment`"
						:rules="rules.price"
					>
						<el-input
							@input="handleInput"
							class="w160"
							size="mini"
							v-model.trim="pay.payment"
							placeholder
						>
							<span slot="suffix">元</span>
						</el-input>
					</el-form-item>
				</el-col>
			</template>
		</el-row>
	</el-form>
</template>

<script>
  import payTypes from './payTypes'

  export default {
    name: 'payTypes',
    props: {
      value: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        form: {
          payTypes: Util.deepClone(payTypes)
        },
        rules: {
          price: Util.createRules(['price']).price,
          description: {
            required: true,
            message: '支付方式不能为空',
            trigger: 'change'
          }
        }
      }
    },
    watch: {
      value: {
        handler(val) {
          if (val.length === 0) {
            this.form.payTypes = Util.deepClone(payTypes)
          } else {
            this.form.payTypes.forEach((pay, idx) => {
              val.forEach(i => {
                if (i.type === pay.type) {
                  const obj = { ...pay, ...i, checked: true }
                  this.$set(this.form.payTypes, idx, obj)
                }
              })
            })
          }
        },
        immediate: true
      }
    },
    methods: {
      handleInput() {
        const arr = this.form.payTypes
          .filter(i => i.checked)
          .map(i => {
            const { description, payment, type } = i
            return {
              description,
              payment,
              type
            }
          })
        this.$emit('input', arr)
      },
      handleChange(val, pay) {
        if (!val) {
          if (pay.payment) pay.payment = ''
          if (pay.description) pay.description = ''
        }
      },
      validate() {
        return new Promise(resolve => {
          this.$refs.form.validate(async valid => {
            resolve(valid)
          })
        })
      }
    }
  }
</script>
